<template>
  <div class="mod-form__child">
    <el-card shadow="never">
      <el-tabs v-model="activeName">
        <el-tab-pane label="数据库字段" name="first2">
          <el-col>
            <div class="mod-form__child--tools">
              <el-button size="small" type="primary" @click="addRow()">{{ $t('add') }}</el-button>
              <!-- <el-button type="text"> <i class="el-icon-plus" style="font-size: 16px;color: #606278;"></i>
          </el-button>
          <el-button type="text"> <i class="el-icon-minus" style="font-size: 16px;color: #606278;"></i>
          </el-button>
          <el-button type="text"> <i class="el-icon-close" style="font-size: 16px;color: #606278;"></i>
          </el-button> -->
              <!-- <el-button-group>
            <el-button type="primary" icon="el-icon-edit"></el-button>
            <el-button type="primary" icon="el-icon-share"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
          </el-button-group> -->
            </div>
          </el-col>
          <el-col>
            <div class="mod-dpd__dpdRuleColumns">
              <!-- <vxe-toolbar>
            <template v-slot:buttons>
              <el-button size="small" type="primary" @click="addRow()">{{ $t('add') }}</el-button>
            </template>
             <template v-slot:tools>
              <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
            </template>
          </vxe-toolbar> -->
              <vxe-table ref="editable" v-loading="loading" :showOverflow="false" row-key :data="dataList" class="vxe-table-element" border max-height="350" :edit-config="{trigger: 'click', mode: 'row' }" :edit-rules="dataRule" auto-resize>
                <vxe-table-column type="index" fixed="left" width="50" align="center"></vxe-table-column>
                <vxe-table-column width="60" align="center">
                  <template>
                    <span class="drag-btn">
                      <i class="vxe-icon--menu"></i>
                    </span>
                  </template>
                  <template v-slot:header>
                    <vxe-tooltip v-model="showHelpTip1" content="按住后可以上下拖动排序！" enterable>
                      <i class="vxe-icon--question" @click="showHelpTip1 = !showHelpTip1"></i>
                    </vxe-tooltip>
                  </template>
                </vxe-table-column>
                <!-- 字段名称 -->
                <!--文本框-->
                <vxe-table-column field="columnName" title="字段名称" :edit-render="{name: 'ElInput',autofocus:false}" min-width="100">
                </vxe-table-column>
                <!-- 字段类型 -->
                <!--文本框-->
                <vxe-table-column field="columnType" title="字段类型" :edit-render="{autofocus:false}" width="150">
                  <template v-slot:edit="{ row }">
                    <UniFieldSelect v-model="row.columnTypeId" :data="fieldTypeList" :backFun="(outRow)=>{ backFun(row,outRow) }"></UniFieldSelect>
                  </template>
                </vxe-table-column>
                <!-- 长度 -->
                <!--文本框-->
                <vxe-table-column field="maxLength" title="长度" :edit-render="{name: 'ElInput',autofocus:false}" width="100" align="center">
                </vxe-table-column>
                <!-- 小数位数 -->
                <!--文本框-->
                <vxe-table-column field="numericScale" title="小数位数" :edit-render="{name: 'ElInput',autofocus:false}" width="100" align="center">
                </vxe-table-column>
                <!-- 允许NULL -->
                <!--开关单选-->
                <vxe-table-column field="isNullable" title="允许NULL" :edit-render="{name: 'ElSwitch',autofocus:false, type: 'visible'}" width="100" align="center">
                </vxe-table-column>
                <!-- 默认值 -->
                <!--文本框-->
                <vxe-table-column field="columnDefault" title="默认值" :edit-render="{name: 'ElInput',autofocus:false}" width="100" align="center">
                </vxe-table-column>
                <!-- KEY类型 PRI主键 -->
                <!--下拉框-->
                <vxe-table-column field="columnKey" title="KEY类型" :edit-render="{name: 'ElSelect',
                         props:{clearable:true},
                         options:columnKeyList,
                         optionProps:{value: 'val', label: 'label' } }" width="100" align="center">
                </vxe-table-column>
                <!-- 排序 -->
                <!--计数器-->
                <!-- <vxe-table-column field="sort" title="排序" :edit-render="{name: 'ElInputNumber',autofocus:false,props: {min: 1,max:50} }"
              width="100" align="center">
            </vxe-table-column> -->
                <!-- 字段备注 -->
                <!--文本框-->
                <vxe-table-column field="columnComment" title="字段备注" :edit-render="{name: 'ElInput',autofocus:false}" min-width="100">
                </vxe-table-column>
                <vxe-table-column title="handle" header-align="center" align="center" width="70">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deltRow(scope.row)">{{ $t('delete') }}</el-button>
                  </template>
                </vxe-table-column>
              </vxe-table>
            </div>
          </el-col>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<style>
@import './common/dpdStyle.scss';
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
import mixinViewSortable from './common/view-sortable'
import UniFieldSelect from '@/components/uni-field-select'
import $cons from './common/constant'

export default {
  mixins: [mixinViewModule, mixinViewSortable],
  data () {
    return {
      activeName: 'first2',
      showHelpTip1: false,
      loading: false,
      fieldTypeList: [],
      columnKeyList: $cons.columnKeyList,

      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/dpd/dpdRuleColumns/list',
        getDataListIsPage: false,
        deleteURL: '/dpd/dpdRuleColumns',
        deleteIsBatch: false
      },
      dataForm: {
        id: '',
        ruleId: '',
        columnName: '',
        isNullable: false,
        columnDefault: '',
        columnType: '',
        columnKey: '',
        maxLength: '',
        columnComment: '',
        numericScale: '',
        sort: '',
        remark: '',
        creator: '',
        createDate: '',
        updater: '',
        updateDate: ''
      },
      deltList: [],
      dataRule: {
        columnName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        columnType: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        columnComment: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        sort: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  created () { },
  components: { UniFieldSelect },
  methods: {
    // 统一读取数据，不采用组件自动加载，可编辑table会创建多个副本
    async getFieldTypeList () {
      this.$http.get('/dpd/dpdColumnType/list', { params: { dbType: this.dbType } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.fieldTypeList = res.data
      })
    },
    backFun (row, outRow) {
      row.columnType = outRow.columnType
      row.columnTypeBiz = outRow.columnTypeBiz
      row.limitFlag = outRow.limitFlag
      row.maxLength = outRow.maxLength
      row.numericScale = outRow.numericScale
    },
    // 新增
    addRow () {
      // 默认插入一行 可以设置插入数据的默认值 自行处理
      this.$refs.editable.insertAt(this.dataForm, -1).then(row => {
        // 设置插入行的可编辑状态
        this.$refs.editable.setActiveRow(row)
      })
    },
    getAllData () {
      return this.$refs.editable.getTableData().tableData
    },
    // 删除row
    deltRow (rowData) {
      // 主键是否为空
      if (rowData.id) {
        // 不为空将 row 移到 deltList
        this.deltList.push(rowData)
        // 移除行
        this.$refs.editable.remove(rowData)
      } else {
        this.$refs.editable.remove(rowData)
      }
    },
    async fullValidEvent () {
      const errMap = await this.$refs.editable.fullValidate().catch(errMap => errMap)
      let self = this
      if (errMap) {
        Object.values(errMap).forEach(errList => {
          errList.forEach(params => {
            let { rowIndex, column, rules } = params
            rules.forEach(rule => {
              self.$message.error(`第 ${rowIndex} 行 ${column.title} 校验错误：${rule.message}`)
            })
          })
        })
        return false
      } else {
        return true
      }
    }
  }
}
</script>
